<template>
  <el-dialog v-model="open" :title="title" width="800px" append-to-body :close-on-click-modal="false">
    <el-form ref="dialogRef" :model="form" :rules="rules" label-width="100px" :disabled="isView">
      <el-form-item label="会员姓名" prop="memberName">
        <el-input v-model="form.memberName" placeholder="请输入会员姓名"/>
      </el-form-item>
      <el-form-item label="性别">
        <el-select v-model="form.memberSex">
          <el-option label="男" value="1"/>
          <el-option label="女" value="0"/>
          <el-option label="未知" value="2"/>
        </el-select>
      </el-form-item>
      <el-form-item label="手机号" prop="memberTelno">
        <el-input v-model="form.memberTelno" type="number" placeholder="请输入手机号"/>
      </el-form-item>
      <el-form-item label="生日">
        <el-date-picker v-model="form.memberBirth" type="date" placeholder="请输入生日" value-format="YYYY-MM-DD"/>
      </el-form-item>
      <el-form-item label="身份证号" prop="memberCard">
        <el-input v-model="form.memberCard" placeholder="请输入身份证号"/>
      </el-form-item>
      <el-form-item v-if="!isEdit" label="开卡费用" prop="cardOpenFee">
        <el-input v-model="form.cardOpenFee" type="number" placeholder="请输入开卡费用">
          <template #append>
            <el-select v-model="form.payType" property="支付方式" style="width: 100px">
              <el-option label="扫码" value="0"/>
              <el-option label="现金" value="1"/>
              <el-option label="微信" value="2"/>
              <el-option label="支付宝" value="3"/>
              <el-option label="其他" value="4"/>
            </el-select>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item v-if="!isEdit" label="到账费用" prop="finalBalance">
        <el-input v-model="form.finalBalance" type="number" placeholder="请输入到账费用"/>
      </el-form-item>
      <el-form-item label="关联项目" prop="relateProjectId">
        <!-- @change="selectedProject" -->
        <el-select v-model="relateVenueProjectStrArray" multiple>
          <el-option v-for="p in props.relateProjectList" :key="p.id" :label="p.projectName" :value="p.id"/>
        </el-select>
      </el-form-item>
      <el-form-item label="会员等级" prop="cardTypeId">
        <el-select v-model="form.cardTypeId" @change="selectedCard">
          <el-option v-for="card in props.cardList" :key="card.id" :label="card.name" :value="card.id"/>
        </el-select>
      </el-form-item>
      <el-form-item label="优惠折扣" prop="discountPercent">
        <el-input v-model="form.discountPercent" type="number" placeholder="请输入优惠折扣">
          <template #append>%</template>
        </el-input>
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="form.remark" type="textarea"/>
      </el-form-item>
    </el-form>
    <template v-if="!isView" #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">保 存</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { getCurrentInstance } from '@vue/runtime-core'
import { reactive, watch } from 'vue'
import { toRefs } from '@vueuse/shared'
import { modifyMember } from '../../../../../api/ven/member'

const { proxy } = getCurrentInstance()

const props = defineProps({
  props: {
    type: Object,
    default: () => ({
      open: false,
      isView: false,
      title: ''
    })
  },
  cardList: {
    type: Array,
    default: () => []
  },
  relateProjectList: {
    type: Array,
    default: () => []
  }
})
const emit = defineEmits(['submitForm'])
const formBase = {
  memberSex: '2'
}
const data = reactive({
  isEdit: true,
  form: {
    ...formBase
  },
  rules: {
    memberName: [{ required: true, message: '必填', trigger: 'blur' }],
    memberTelno: [{ required: true, message: '必填', trigger: 'blur' }, {
      pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
      message: '请输入正确的手机号码',
      trigger: 'blur'
    }],
    memberCard: [{ pattern: /(^\d{15}$)|(^\d{17}([0-9]|X)$)/, message: '请输入正确的身份证号码', trigger: 'blur' }],
    cardOpenFee: [{
      validator: (rule, value, callback) => {
        if (!value || !form.value.payType) {
          callback('必填')
        } else {
          callback()
        }
      }, required: true
    }],
    finalBalance: [{ required: true, message: '必填', trigger: 'blur' }],
    cardTypeId: [{ required: true, message: '必填', trigger: 'change' }],
    // relateProjectId: [{ required: true, message: '必填', trigger: 'change' }],
    discountPercent: [{
      validator: (rule, value, callback) => {
        if (!value) {
          callback('必填')
          return
        } else {
          if (value < 0 || value > 100) {
            callback('输入有误')
            return
          }
        }
        callback()
      }, required: true
    }]
  }
})
const { open, title, isView } = toRefs(props.props)
const { form, rules, isEdit } = toRefs(data)
const relateVenueProjectStrArray = ref([])
const relateVenueProjectStrIds = ref('')
watch(open, (val) => {
  if (val) {
    form.value = props.props.data || { ...formBase }
    isEdit.value = !!form.value.id
    relateVenueProjectStrArray.value = form.value.relateVenueProjectIdList
  } else {
    proxy.resetForm('dialogRef')
  }
})

function selectedCard(id) {
  const card = _.find(props.cardList, (c) => c.id === id)
  form.value.discountPercent = card.discountPercent
}

// function selectedProject(id) {
//   const card = _.find(props.relateProjectList, (c) => c.id === id)
//   form.value.discountPercent = card.discountPercent
// }

function submitForm() {
  proxy.$refs['dialogRef'].validate((valid) => {
    if (valid) {
      console.log(relateVenueProjectStrArray.value)
      if (relateVenueProjectStrArray.value) {
        form.value.relateVenueProjectIds = relateVenueProjectStrArray.value.toString()
      } else {
        form.value.relateVenueProjectIds = ''
      }
      modifyMember(form.value).then(() => {
        proxy.$modal.msgSuccess('操作成功')
        open.value = false
        emit('submitForm')
      })
    }
  })
}

function cancel() {
  open.value = false
}

</script>

<style scoped>

</style>
